<template>
<!-- 支付订单 -->
  <div class="order-bgc">
    <div class="putSupplier" v-for="(item,index) in newArrayData" :key="index">
      <div class="header acea-row row-between-wrapper">
        <div class="left acea-row row-middle">
          <div class="pictrue" :id="'qrCodeUrl'+index"></div>
          <div class="info">
            <div><span class="name">收货人：</span>{{item.real_name}}</div>
            <div><span class="name">收货地址：</span>{{item.user_address}}</div>
            <div><span class="name">手机号：</span><span>{{item.user_phone}}</span></div>
          </div>
        </div>
        <div class="info">
          <div><span class="name">订单编号：</span>{{item.order_id}}</div>
          <div><span class="name">支付时间：</span>{{item.pay_time}}</div>
          <div><span class="name">支付方式：</span>{{item.pay_type_name}}</div>
        </div>
      </div>
      <div class="mt20">
        <Table border :columns="columns" :data="item.goodsList" :disabled-hover="true">
          <template slot-scope="{ row }" slot="store_name">
            <div class="line1">{{row.store_name}}</div>
          </template>
          <template slot-scope="{ row }" slot="suk">
            <div class="line1">{{row.suk}}</div>
          </template>
        </Table>
      </div>
      <div class="bottom acea-row row-between-wrapper">
        <div class="acea-row row-middle">
          <div class="item"><span class="name">运费：</span>{{item.freight_price}}</div>
          <div class="item"><span class="name">优惠：</span>{{item.coupon_price}}</div>
          <div class="item"><span class="name">会员折扣：</span>{{item.vip_true_price}}</div>
          <div class="item"><span class="name">积分抵扣：</span>{{item.deduction_price}}</div>
        </div>
        <div class="pricePay">实付金额：{{item.pay_price}}</div>
      </div>
      <div class="bottom acea-row">
        <div class="name">用户备注：<span class="con">{{item.mark || '-'}}</span></div>
      </div>
      <div class="h50">
        <div v-if="site_name || refund_phone || refund_address" class="delivery">
          <div v-if="site_name">店铺信息：{{ site_name }}</div>
          <div v-if="refund_address">地址：{{ refund_address }}</div>
          <div v-if="refund_phone">联系方式：{{ refund_phone }}</div>
        </div>
      </div>
    </div>
    <!--  注意：后续要是加内容使页面撑大，记得查看下打印是否在同一张,是否会多余一张空白纸  -->
  </div>
</template>
<script>
  import { distributionInfo } from '@/api/supplier'
  import { distributionOrder } from '@/api/order'
  import QRCode from 'qrcodejs2';
  import Setting from '@/setting';
  export default {
    data (){
      return {
        columns:[
          {
            title: '商品编号',
            key: 'index',
            align: 'center',
            width: 60
          },
          {
            title: '商品名称',
            slot: 'store_name',
            align: 'center',
            minWidth: 253
          },
          {
            title: '商品规格',
            slot: 'suk',
            align: 'center',
            width: 219
          },
          // {
          //     title: '商品条码',
          //     key: 'bar_code',
          //     align: 'center',
          //     width: 109
          // },
          // {
          //     title: '商品编码',
          //     key: 'code',
          //     align: 'center',
          //     width: 109
          // },
          {
            title: '单价',
            key: 'truePrice',
            align: 'center',
            width: 100
          },
          {
            title: '数量',
            key: 'cart_num',
            align: 'center',
            width: 60
          },
          {
            title: '金额',
            key: 'subtotal',
            align: 'center',
            width: 100
          },
        ],
        data:{},
        goods:[],
        BaseURL: Setting.apiBaseURL.replace(/adminapi/, ""),
        newArrayData:[],
        site_name: '',
        refund_phone: '',
        refund_address: ''
      }
    },
    created() {
      this.getDistribution();
    },
    mounted() {
      this.$nextTick(function () {
        let that = this;
        setTimeout(function () {
          that.creatQrCode();
        },200)
      })
    },
    methods:{
      // 生成二维码
      creatQrCode() {
        let url= this.BaseURL;
        let qrcode = '';
        this.newArrayData.forEach((item,index)=>{
          let obj = document.getElementById('qrCodeUrl'+index);
          qrcode = new QRCode(obj, {
            text: url, // 需要转换为二维码的内容
            width: 90,
            height: 90,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        });

      },
      getDistribution(){
        let header = this.$route.query.status == 1?distributionInfo:distributionOrder;
        header(this.$route.query.id).then(res=>{
          this.data = res.data;
          this.goods = res.data.list
          let data = res.data;
          let newArray = [];
          this.site_name = data.site_name;
          this.refund_phone = data.refund_phone;
          this.refund_address = data.refund_address;
          data.list.forEach((i,indexi)=>{
            let listArray = [];
            let goods = i.list;
            let count = Math.ceil(goods.length / 6);
            for(let j = 0; j < count; j++){
              let list = goods.slice(j * 6, j * 6 + 6);
              if (list.length){
                listArray.push(list)
              }
            }
            let num = 6 - listArray[listArray.length-1].length;
            if(num){
              for(let z = 0; z < num; z++){
                listArray[listArray.length-1].push({
                  cart_num:'',
                  index:'',
                  store_name:'',
                  subtotal:'',
                  suk:'',
                  truePrice:''
                })
              }
            }
            listArray.forEach((x)=>{
              newArray.push({
                real_name : i.real_name,
                user_address : i.user_address,
                user_phone : i.user_phone,
                freight_price : i.freight_price,
                coupon_price : i.coupon_price,
                vip_true_price : i.vip_true_price,
                use_integral : i.use_integral,
                deduction_price : i.deduction_price,
                pay_price : i.pay_price,
                mark : i.mark,
                order_id: i.order_id,
                pay_time: i.pay_time,
                pay_type_name: i.pay_type_name,
                goodsList : x
              });
            })
          })
          this.newArrayData = newArray;
        }).catch(err=>{
          this.$Message.error(err.msg)
        })
      }
    }
  }

</script>
<style lang="less" scoped>
.order-bgc {
  background-color: #fff;
}
  /deep/.ivu-table th{
    background-color: #fff!important;
  }
  /deep/.ivu-table-header thead tr th:nth-of-type(1){
    padding-left:0!important;
  }
  /deep/.ivu-table-header thead tr th{
    border-top: 1px solid #333;
  }
  /deep/.ivu-table td:nth-of-type(1){
    padding-left:0!important;
  }
  /deep/.ivu-table-header table{
    //border-top:0!important;
  }
  /deep/.ivu-table-border th, /deep/.ivu-table-border td{
    border-right: 1px solid #333!important;
  }
  /deep/.ivu-table-border th:nth-of-type(1), /deep/.ivu-table-border td:nth-of-type(1){
    border-left: 1px solid #333!important;
  }
  /deep/.ivu-table th, /deep/.ivu-table td{
    border-bottom: 1px solid #333!important;
    height: 47px;
  }
  /deep/.ivu-table-wrapper-with-border{
    border-color: #333!important;
    border: unset;
  }
  /deep/.ivu-table-border:after{
    background-color: #333;
    width: 0!important;
    height: 0!important;
  }
  /deep/.ivu-table:before{
    background-color: #333;
    width: 0!important;
    height: 0!important;
  }
  /deep/.ivu-table{
    color: #000;
  }
  .pricePay{
    font-weight: bold;
  }
  .bottom{
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;
    font-weight: 400;
    margin-top: 10px;
    .item{
      margin-right: 30px;
    }
    .name{
      font-weight: 600;
    }
    .con{
      width: 740px;
      font-weight: unset;
    }
  }
  .putSupplier{
    width: 794px;
    background-color: #fff;
    margin: 0 auto;
    padding-top: 10px;
    /*padding: 20px 20px 450px 20px;*/
    /*box-sizing: border-box;*/
    .header{
      .info{
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
        .name{
          font-weight: 600;
        }
        div~div{
          margin-top: 10px;
        }
      }
      .left{
        width: 500px;
        .pictrue{
          width: 90px;
          height: 90px;
          margin-right: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .info{
          flex: 1;
        }
      }
    }
  }
  .delivery {
    display: flex;
    justify-content: center;
    width: 794px;
    padding-top: 14px;
    border-top: 1px solid #DDDDDD;
    margin: 11px auto;
    font-size: 10px;
    color: #333333;

    div + div {
      margin-left: 30px;
    }
  }
</style>